<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-22 18:36:50
 * @LastEditors: chaixinyu
 * @LastEditTime: 2023-01-13 19:15:46
-->
<template>
  <div class="course-more">

    <!-- 更多模块 -->
    <div class="more-module">

      <!-- 学习记录 -->
      <div class="module-data">
        <van-cell is-link @click="goStudyRecord">
          <template #title>
            <div class="discuss-box">
              <div class="discuss-img">
                <span class="iconfont icon-qianbi img-data"></span>
              </div>
              <span class="custom-title">学习记录</span>
            </div>
          </template>

        </van-cell>
      </div>

      <!-- 班级空间 -->
      <div class="module-data" @click="goDirectory">
        <van-cell is-link>

          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="discuss-box">
              <div class="discuss-img">
                <span class="iconfont icon-chengyuan img-class"></span>
              </div>
              <span class="custom-title">班级成员</span>
            </div>
          </template>

        </van-cell>
      </div>

      <!-- 笔记 -->
      <div class="module-data" @click="goNote">
        <van-cell is-link>

          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="discuss-box">
              <div class="discuss-img">
                <span class="iconfont icon-icon img-note"></span>
              </div>
              <span class="custom-title">课堂笔记</span>
            </div>
          </template>

        </van-cell>
      </div>

    </div>

    <!-- 课程说明 -->
    <div class="more-explain">课程说明</div>

    <!-- 课程介绍 -->
    <div class="more-recommend">
      {{courseMsg}}
    </div>

  </div>
</template>

<script setup>
// 引入vant
import { Cell, CellGroup,PullRefresh } from 'vant';

// 引入路由
import { useRouter } from 'vue-router'

// 引入仓库
import { useCourseStore } from '@/stores/course'
import { storeToRefs } from 'pinia'

//实例化仓库对象
const course = useCourseStore()

//解构数据(如果想要处理响应式数据，使用storeToRefs)
const { courseMsg } = storeToRefs(course)

// 实例化路由
const router = useRouter()

// 跳转到学习记录页面
const goStudyRecord = () => {
  router.push('/studyrecord')
}

// 跳转到通讯录页面
const goDirectory = () => {
  router.push('/directory')
}

// 跳转到课堂笔记页面
const goNote = () => {
  router.push('/note')
}
</script>

<style lang="less" scoped>
.course-more{

  :deep(.van-cell--clickable){
    border-bottom: 1px solid #f0f0f0;
  }

  .more-module{

    .module-data{

      .discuss-box{
        display: flex;
        flex-flow: row;

        .discuss-img{
          width: 50px;
          height: 50px;
          border-radius: 7px;

          .img-note,
          .img-class,
          .img-data{
            // margin-left: 5px;
            line-height: 50px;
            font-size: 30px;
          }

          .img-data{
            color: #ffb84c;
            font-size: 30px;
          }

          .img-class{
            color: #34a3ff;
          }

          .img-note{
            color: #1cccc1;
          }
        }

        .custom-title{
          // margin-left: 3px;
          line-height: 50px;
        }

      
      }

      :deep(.van-cell__right-icon){
        margin-top: 15px;
      }

    }
  }

  .more-explain{
    padding: 10px 15px;
    background-color: #f5f6f8;
    color: #b7b8b7;
  }

  .more-recommend{
    padding: 20px;
    font-size: 14px;
    letter-spacing: 2px;
  }
}
</style>
